<style lang="less" scoped>
.warn-map-wrap {
  width: 100%;
  height: 280px;

  top: 0;
  z-index: 110;
  #warn-map {
    width: 100%;
    height: 100%;
  }
}
</style>

<template>
  <div>
    <div class="warn-map-wrap">
      <div id="warn-map"></div>
    </div>
    <div>
      <Table :loading="loading"
             border
             :columns="columns"
             :data="data"
             size="small"
             max-height="300"></Table>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap'
import { getEventDetail } from '@/api/monitor'
export default {
  props: {
    eventItem: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  components: {},
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '速度（km/h）',
          key: 'speed',
          width: 120
        },
        {
          title: '报警时间',
          key: 'alarmTime',
          minWidth: 100
        },
        {
          title: '车辆状态',
          key: 'carStatus',
          width: 120,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '报警类型',
          key: 'alarmType',
          width: 120,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '纬度',
          key: 'lat',
          width: 100
        },
        {
          title: '经度',
          key: 'lng',
          width: 100
        }
      ],
      data: [],
      map: null,
      marker: null
    }
  },
  watch: {
    eventItem(curVal, oldVal) {
      if (curVal) {
        this.getEventDetail(curVal.eventId)
      }
    }
  },
  created() {},
  mounted() {
    this.mapInit()
  },
  destroyed() {},
  methods: {
    getEventDetail(eventId) {
      this.loading = true
      getEventDetail({ eventId: eventId }).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.data = res.data
          console.log(this.data)
          if (this.data.length > 0) {
            this.startTrackPlay()
          }
        }
      })
    },
    mapInit() {
      this.map = new AMap.Map('warn-map', {
        resizeEnable: true,
        zoom: 5
      })
      let self = this
      this.map.plugin(['AMap.MapType'], function() {
        //地图类型切换
        var type = new AMap.MapType({
          defaultType: 0 //使用2D地图
        })
        self.map.addControl(type)
      })
      this.map.plugin(['AMap.ToolBar'], function() {
        //加载工具条
        var tool = new AMap.ToolBar()
        self.map.addControl(tool)
      })
    },
    clearMap() {
      if (this.marker) {
        this.marker.stopMove()
      }

      this.marker = null
      this.map.clearMap()
    },
    startTrackPlay() {
      this.map.clearMap()
      let me = this
      let len = this.data.length
      let lineArr = []
      for (let i = 0; i < len; i++) {
        let item = this.data[i]
        if (i > 0) {
          let lastItem = this.data[i - 1]
          var Xgap = Math.abs(parseFloat(item.lat) - parseFloat(lastItem.lat))
          var Ygap = Math.abs(parseFloat(item.lng) - parseFloat(lastItem.lng))
          //距离太小就不加进去  以免高德地图轨迹回放 内存溢出
          if (Xgap < 0.000005 && Ygap < 0.000005) {
          } else {
            lineArr.push([item.lng, item.lat])
          }
        } else {
          lineArr.push([item.lng, item.lat])
        }
      }
      //  = this.data.map(item => {
      //   return [item.lng, item.lat];
      // });
      console.log(lineArr)
      this.marker = new AMap.Marker({
        map: me.map,
        position: lineArr[0],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90
      })
      if (lineArr.length > 1) {
        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: me.map,
          path: lineArr,
          showDir: true,
          strokeColor: '#28F', //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 //线宽
          // strokeStyle: "solid"  //线样式
        })

        var passedPolyline = new AMap.Polyline({
          map: me.map,
          // path: lineArr,
          strokeColor: '#AF5', //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 //线宽
          // strokeStyle: "solid"  //线样式
        })

        this.marker.on('moving', function(e) {
          passedPolyline.setPath(e.passedPath)
        })

        this.marker.moveAlong(
          lineArr,
          200,
          function(k) {
            return k
          },
          true
        )
      }

      this.map.setFitView()
    }
  }
}
</script>
